<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ScriptRoot {
            position: fixed;
            right: 50px;
            bottom: 50px;
        }

        #ScriptRoot .context {
            width: 500px;
            position: absolute;
            left: -100%;
            top: -100%;
        }

        .dialog {
            background: #fff;
            padding: 15px;
            position: fixed;
            z-index: 10000;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
            border-radius: 15px;
        }

        .dialogBtn {
            text-align: center;
            padding-top: 15px;
        }

        .dialogBtn button {
            cursor: pointer;
            padding-left: 15px;
            padding-right: 15px;
            height: 30px;
            background: #3f74e3;
            color: #fff;
            font-size: 14px;
            text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.5);
            border: none;
            border-radius: 5px;
        }

        .dialogBtn button:hover {
            background: #1846a8;
        }

        .dialogContent {
            min-width: 300px;
            min-height: 80px;
            font-size: 16px;
            line-height: 1.5;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #ScriptContent {
            display: flex;
            gap: 2;
        }
    </style>
</head>

<body>
    <dialog class="dialog" id="ScriptDialog">
        <div class="dialogContent">
            <form id="ScriptForm">
                <div id="ScriptContent">
                    <div>
                        <h1>文本处理</h1>
                        <div>
                            <h2>人工审核（初审）</h2>
                            <ul>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                            </ul>
                            <h2>人工审核（初审）</h2>
                            <ul>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <h1>文本处理</h1>
                        <div>
                            <h2>人工审核（初审）</h2>
                            <ul>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                            </ul>
                            <h2>人工审核（初审）</h2>
                            <ul>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                                <li> 初审<input type="checkbox" /> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
            <div class="dialogBtn">
                <button id="ScriptOkBtn">确定</button>
            </div>
    </dialog>
    <div id="ScriptRoot">
        <div>
            <button id="ScriptGetListBtn">获取列表</button>
            <button id="ScriptStart">开始</button>
            <button id="ScriptShow">展开列表</button>
        </div>
    </div>
    <script>
        const startBtn = document.getElementById("ScriptStart")
        const showBtn = document.getElementById("ScriptShow")
        const dialog = document.getElementById("ScriptDialog")
        const content = document.getElementById("ScriptContent");
        const getListBtn = document.getElementById("ScriptGetListBtn");
        const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
        let menu;
        showBtn.onclick = () => {
            document.getElementById("ScriptOkBtn").onclick = () => dialog.close()
            dialog.show()
        }
        let status = false;
        const start = () => {

        }
        const close = () => {

        }
        const onclick = () => {
            status = !status;
            startBtn.innerText = status ? "暂停" : "开始"
            if (status) start()
            else close()
        }
        startBtn.onclick = onclick
        getListBtn.onclick = async () => {
            const menuList = Array.from(document.getElementsByClassName("submenu-wrapper")[0].children);
            menu = menuList.reduce((acc, item) => {
                acc[item.getElementsByTagName("span")[1].innerText] = item;
                return acc
            }, {});
            const arr = ["文本审核", "图片审核"]
            const data = [];
            for (const key of arr) {
                menu[key].click();
                await sleep(1000);
                const header = document.getElementsByClassName("header")[0];
                const [typeItem, valueItem] = Array.from(header.getElementsByClassName("query-item"))
                typeItem.getElementsByClassName("input")[0].click();
                await sleep(500);
                const item = Array.from(document.getElementsByClassName("el-select-dropdown el-popper")).find(e => {
                    return e.style.display !== "none";
                });
                const types = Array.from(item.getElementsByTagName("li")).map((li) => ({
                    li,
                    text: li.innerText,
                    children: []
                }));
                for (let i = 0; i < types.length; i++) {
                    const { li } = types[i]
                    await sleep(500);
                    li.click();
                    valueItem.getElementsByClassName("input")[0].click();
                    await sleep(500);
                    const item = Array.from(document.getElementsByClassName("el-select-dropdown el-popper")).find(e => {
                        return e.style.display !== "none";
                    });
                    types[i].children = Array.from(item.getElementsByTagName("li")).map((li) => ({
                        li,
                        text: li.innerText
                    }))
                    await sleep(500);
                }
                data.push({
                    key,
                    types
                })
                await sleep(1000);
            }
            console.log(data);
        }
    </script>
</body>

</html>